<template>
  <div class="maintenanceReminderNotify">
    <div class="maintenance-reminder-typeTwo" v-if="allNoRemindList.length > 0">
      <div class="maintenance-reminder-detailedList">
        <div class="maintenance-reminder-detailedItem" v-for="(item, index) in allNoRemindList" :key="index">
          <div class="detailedItem-title">
            <div class="detailedItem_title_label">
              提醒时间：
            </div>
            <div class="detailedItem_title_content">
              {{item.RemindDate}}
            </div>
          </div>
          <div class="detailedItem-info-view">
            <div class="detailedItem-info-box">
              <div class="car_Frame-view car_commonBox">
                <div class="car_Frame-box">
                  <div class="detailedItem_info_label">
                    车架号：
                  </div>
                  <div class="detailedItem_info_content">
                    {{item.VinCode}}
                  </div>
                </div>
              </div>
              <div class="car_Model car_commonBox">
                <div class="detailedItem_info_label">
                  车　型：
                </div>
                <div class="detailedItem_info_content">
                  {{item.AutoInfo}}
                </div>
              </div>
              <div class="car_license_plate_number car_commonBox">
                <div class="detailedItem_info_label">
                  车牌号：
                </div>
                <div class="detailedItem_info_content">
                  {{item.VehicleNumber}}
                </div>
              </div>
              <div class="car_remark car_commonBox">
                <div class="detailedItem_info_label">
                  备　注：
                </div>
                <div class="detailedItem_info_content">
                  {{item.RemindContent}}
                </div>
              </div>
            </div>
          </div>
          <div class="detailedItem-footer">
            <div class="detailedItem-startTime">
              {{item.CreateTime}}
            </div>
            <div class="detailedItem-already_notice_Btn lusir-common_cursor" @click="informedFn(item)">
              已通知，不再提醒
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="maintenance-reminder-typeThree" v-else>
      <img class="img" src="../assets/images/notReminder.png" alt="">
      <div class="desc">已全部通知完毕</div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  data() {
    return {
      IMGroupCode: this.$com_util.getQueryString("IMGroupCode"), //
      maintenanceReminderType: 2,
      IMVehicleInfo: {},
      allNoRemindList: [],
    };
  },
  created() {
    this.GetAllNoRemindForGroupId();
  },
  methods: {
    async informedFn(item) {
      const res = await this.$imServive({
        url: "/IMVehicle/UpdateRemindStatus",
        data: {
          IMMaintainRemindId: item.IMMaintainRemindId,
        },
      });
      Toast.success('通知成功');
      this.GetAllNoRemindForGroupId();
    },
    // 获取当前群所有的待提醒数据
    async GetAllNoRemindForGroupId() {
      const res = await this.$imServive({
        url: "/IMVehicle/GetAllNoRemindForGroupId",
        data: {
          ImGroupCode: this.IMGroupCode,
        },
      });
      this.allNoRemindList = res.list;
    },
  },
};
</script>

<style lang='stylus' scoped>
.maintenanceReminderNotify
  background-color #ecedee
  height 100vh
  overflow-y scroll
  border-top 1px solid #e0e0e0
.maintenance-reminder-typeThree
  text-align center
  .img
    margin-top 3.47rem
    width 1.44rem
    height 1.44rem
  .desc
    margin-top 0.32rem
    height 0.8rem
    color #bcbcbc
    font-size 0.48rem
    display flex
    align-items center
    justify-content center
.maintenance-reminder-detailedList
  .maintenance-reminder-detailedItem
    margin-top 0.4rem
  .detailedItem-title
    display flex
    align-items center
    padding 0.24rem 0.4rem
    background-color #fff
    .detailedItem_title_label
      color #5b5b5b
      font-size 0.4rem
    .detailedItem_title_content
      color #e74c3c
      font-size 0.48rem
      font-weight 500
  .detailedItem-info-view
    background-color #fff
    padding 0 0.4rem
  .detailedItem-info-box
    padding 0.32rem 0.28rem 0.29rem
    border-radius 0.08rem
    border 1px solid #d8d8d8
    background-color #fafafa
    box-sizing border-box
    .car_commonBox
      line-height 0.64rem
      display flex
      align-items flex-start
      margin-bottom 0.08rem
    .car_commonBox:last-child
      margin-bottom 0
    .car_Frame-view
      display flex
      align-items center
      justify-content space-between
      .car_Frame-box
        display flex
        align-items center
        justify-content space-between
      .car_maintenance_cycle
        color #377de8
        font-size 0.36rem
    .detailedItem_info_label
      color #8e8e8e
      font-size 0.36rem
      min-width 1.39rem
      white-space nowrap
    .detailedItem_info_content
      color #282828
      font-size 0.36rem
      text-transform uppercase
  .detailedItem-footer
    display flex
    align-items center
    justify-content space-between
    padding 0.4rem
    background-color #fff
    .detailedItem-startTime
      color #8e8e8e
      font-size 0.36rem
    .detailedItem-already_notice_Btn
      height 0.96rem
      border-radius 0.11rem
      background-color #e74c3c
      padding 0 0.32rem
      display flex
      align-items center
      justify-content center
      color #ffffff
      font-size 0.4rem
</style>
